<template>
  <div class="register-container">
    <!-- 顶部标题 -->
    <div class="header">用户注册</div>
    
    <!-- 注册表单 -->
    <div class="form-container">
      <van-form @submit="onSubmit">
        <!-- 手机号输入框 -->
        <van-field
          v-model="registerForm.phone"
          type="tel"
          label=""
          placeholder="手机号码"
          :rules="[{ required: true, message: '请输入手机号码' }]"
        />
        <!-- 密码输入框 -->
        <van-field
          v-model="registerForm.password"
          type="password"
          label=""
          placeholder="密码"
          :rules="[{ required: true, message: '请输入密码' }]"
        />
        <!-- 确认密码输入框 -->
        <van-field
          v-model="registerForm.confirmPassword"
          type="password"
          label=""
          placeholder="确认密码"
          :rules="[{ required: true, message: '请再次输入密码' }]"
        />
        <!-- 用户昵称 -->
        <van-field
          v-model="registerForm.username"
          label=""
          placeholder="用户昵称"
          :rules="[{ required: true, message: '请输入用户昵称' }]"
        />
        <!-- 性别选择 -->
        <van-field name="gender" label="">
          <template #input>
            <van-radio-group v-model="registerForm.gender" direction="horizontal">
              <van-radio name="1">男</van-radio>
              <van-radio name="2">女</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        
        <!-- 注册按钮 -->
        <div style="margin: 16px">
          <van-button round block type="primary" native-type="submit">
            注册
          </van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script setup>
import { reactive } from 'vue'
import { useRouter } from 'vue-router'
import { showToast } from 'vant'
import axios from 'axios'

const router = useRouter()
const registerForm = reactive({
  phone: '',
  password: '',
  confirmPassword: '',
  username: '',
  gender: '1'
})

const onSubmit = async () => {
  if (registerForm.password !== registerForm.confirmPassword) {
    showToast('两次输入的密码不一致')
    return
  }
  
  try {
    const res = await axios.post(`${import.meta.env.VITE_API_BASE_URL}/user/register?userName=${registerForm.username}&password=${registerForm.password}&userSex=${registerForm.gender}`)
    
    if (res.data.code === 200) {
      showToast('注册成功')
      router.push('/login')
    } else {
      showToast(res.data.message)
    }
  } catch (error) {
    showToast('注册失败，请稍后重试')
  }
}
</script>

<style scoped>
.register-container {
  padding: 20px;
  height: 100vh;
  background: #fff;
}

.header {
  text-align: center;
  font-size: 24px;
  color: #333;
  margin-bottom: 40px;
  padding-top: 40px;
}

.form-container {
  margin-top: 20px;
}
</style> 